<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="验证验收预测" data-page-identification="v_3iqle7sug1">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q29j21dwnj 自定义模板_lhibcr6loi -->
            <div class="body">
                <div class="top-search">
                    <div class="border-div">
                        <a-row :gutter="24">
                            <a-col :span="6">
                                <a-form-item label="年份">
                                    <a-date-picker
                                        style="width: 100%"
                                        v-model:value="state.filter.year"
                                        picker="year"
                                        :allow-clear="false"
                                        value-format="YYYY"
                                        @change="dateChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="批次">
                                    <a-select
                                        allow-clear
                                        show-search
                                        v-model:value="state.filter.batch"
                                        :options="state.batchList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="getData"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="风险等级">
                                    <a-select
                                        allow-clear
                                        show-search
                                        mode="multiple"
                                        v-model:value="state.filter.riskLevel"
                                        :options="state.fxdjList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'itemName', value: 'itemName' }"
                                        @change="getData"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="2">
                                <a-button type="primary" @click="resetData">重置</a-button>
                            </a-col>
                        </a-row>
                    </div>
                </div>
                <div class="content">
                    <div class="tip">
                        <div class="one">
                            <span class="weight-font">预计年度内完成验证</span
                            ><span class="title-color-font">{{ state.verifyYearValue }}</span
                            >家
                            <span class="weight-font" style="margin-left: 12px"
                                >预计本季度完成验证<span class="title-color-font">{{ state.verifyQuarterValue }}</span
                                >家：</span
                            >
                            <span class="normal-font">{{ state.month1 }}月份完成验证</span
                            ><span class="title-color-font">{{ state.verifyMonthValue1 }}</span
                            >家； <span class="normal-font">{{ state.month2 }}月份完成验证</span
                            ><span class="title-color-font">{{ state.verifyMonthValue2 }}</span
                            >家； <span class="normal-font">{{ state.month3 }}月份完成验证</span
                            ><span class="title-color-font">{{ state.verifyMonthValue3 }}</span
                            >家
                        </div>
                        <div class="two">
                            <span class="weight-font">预计年度内完成验收</span
                            ><span class="title-color-font">{{ state.checkYearValue }}</span
                            >家
                            <span class="weight-font" style="margin-left: 12px"
                                >预计本季度完成验收<span class="title-color-font">{{ state.verifyQuarterValue }}</span
                                >家：</span
                            >
                            <span class="normal-font">{{ state.month1 }}月份完成验收</span
                            ><span class="title-color-font">{{ state.checkMonthValue1 }}</span
                            >家； <span class="normal-font">{{ state.month2 }}月份完成验收</span
                            ><span class="title-color-font">{{ state.checkMonthValue2 }}</span
                            >家； <span class="normal-font">{{ state.month3 }}月份完成验收</span
                            ><span class="title-color-font">{{ state.checkMonthValue3 }}</span
                            >家
                        </div>
                    </div>
                    <a-table
                        :columns="columns"
                        :data-source="state.dataSource"
                        bordered
                        size="middle"
                        :pagination="false"
                        :scroll="{ x: 'max-content', y: 430 }"
                        :row-class-name="
                            (_record, index) => (index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd')
                        "
                        :loading="state.tableLoading"
                    >
                        <!-- 自定义表头 -->
                        <template #headerCell="{ column }">
                            <div v-if="column.isGroup" style="text-align: center; font-weight: bold"> </div>
                            <div v-if="column.isQuarter">
                                <span style="cursor: pointer" @click="toggleQuarter(column.part, column.quarterKey)">
                                    {{ column.title }}
                                    <span style="margin-left: 5px">
                                        {{ state.quarterStatus[column.part][column.quarterKey] ? '-' : '+' }}
                                    </span>
                                </span>
                            </div>
                            <span v-else>{{ column.title }}</span>
                        </template>

                        <!-- 自定义单元格 -->
                        <template #bodyCell="{ column, text }">
                            <span
                                v-if="column.dataIndex.includes('verify') || column.dataIndex.includes('check')"
                                style="white-space: pre-line"
                            >
                                {{ text }}
                            </span>
                        </template>
                    </a-table>
                </div>
            </div>
            <!-- end vid_q29j21dwnj 自定义模板_lhibcr6loi -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        '1': {
            type: [String],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getBatchList()
        getFxdj()
        getData()
        const currentMonth = dayjs().month() // 获取当前月份 (0-11)
        const quarterStartMonth = Math.floor(currentMonth / 3) * 3 // 计算季度第一个月
        ;(state.month1 = dayjs().month(quarterStartMonth).format('MM')), // 第1个月
            (state.month2 = dayjs()
                .month(quarterStartMonth + 1)
                .format('MM')), // 第2个月
            (state.month3 = dayjs()
                .month(quarterStartMonth + 2)
                .format('MM')) // 第3个月
    })
    // 季度配置
    const quarters = [
        {
            key: 'q1',
            title: '一季度'
        },
        {
            key: 'q2',
            title: '二季度'
        },
        {
            key: 'q3',
            title: '三季度'
        },
        {
            key: 'q4',
            title: '四季度'
        }
    ]
    // 月份配置
    const months = [
        { key: 'q1Total', title: '季度小计', quarter: 'q1', factory: 'q1Factories' },
        { key: 'janValue', title: '1月', quarter: 'q1', factory: 'janFactories' },
        { key: 'febValue', title: '2月', quarter: 'q1', factory: 'febFactories' },
        { key: 'marValue', title: '3月', quarter: 'q1', factory: 'marFactories' },
        { key: 'q2Total', title: '季度小计', quarter: 'q2', factory: 'q2Factories' },
        { key: 'aprValue', title: '4月', quarter: 'q2', factory: 'aprFactories' },
        { key: 'mayValue', title: '5月', quarter: 'q2', factory: 'mayFactories' },
        { key: 'junValue', title: '6月', quarter: 'q2', factory: 'junFactories' },
        { key: 'q3Total', title: '季度小计', quarter: 'q3', factory: 'q3Factories' },
        { key: 'julValue', title: '7月', quarter: 'q3', factory: 'julFactories' },
        { key: 'augValue', title: '8月', quarter: 'q3', factory: 'augFactories' },
        { key: 'sepValue', title: '9月', quarter: 'q3', factory: 'sepFactories' },
        { key: 'q4Total', title: '季度小计', quarter: 'q4', factory: 'q4Factories' },
        { key: 'octValue', title: '10月', quarter: 'q4', factory: 'octFactories' },
        { key: 'novValue', title: '11月', quarter: 'q4', factory: 'novFactories' },
        { key: 'decValue', title: '12月', quarter: 'q4', factory: 'decFactories' }
    ]

    // 表格列配置
    const columns = computed(() => {
        return [
            {
                title: '项目',
                dataIndex: 'areaName',
                key: 'areaName',
                align: 'center',
                width: 150,
                fixed: 'left'
            },
            {
                title: '预计验证',
                isGroup: true,
                children: [
                    ...quarters.map(quarter => ({
                        title: quarter.title,
                        isQuarter: true,
                        dataIndex: quarter.key,
                        quarterKey: quarter.key,
                        part: 'verify', // 修正 part 参数
                        align: 'center',
                        children: getSubColumns(quarter.key, 'verify') // 这里传 'expected'
                    })),
                    {
                        title: '年度预计',
                        width: 170,
                        align: 'center',
                        dataIndex: 'verify_yearTotal'
                    }
                ]
            },
            {
                title: '验收完成',
                isGroup: true,
                customHeaderCell: prams => {
                    return {
                        style: {
                            backgroundColor: '#3858FF'
                        }
                    }
                },
                children: [
                    ...quarters.map(quarter => ({
                        title: quarter.title,
                        isQuarter: true,
                        customHeaderCell: prams => {
                            return {
                                style: {
                                    backgroundColor: '#3858FF'
                                }
                            }
                        },
                        dataIndex: quarter.key,
                        quarterKey: quarter.key,
                        part: 'check',
                        align: 'center',
                        children: getSubColumns(quarter.key, 'check')
                    })),
                    {
                        title: '年度预计',
                        width: 170,
                        align: 'center',
                        customHeaderCell: prams => {
                            return {
                                style: {
                                    backgroundColor: '#3858FF'
                                }
                            }
                        },
                        dataIndex: 'check_yearTotal'
                    }
                ]
            }
        ]
    })
    console.log(columns, 'columns')
    // 获取子列（月份）
    // 获取子列（月份）
    const getSubColumns = (quarterKey, part) => {
        // 找到当前季度的月份配置
        const quarterMonths = months.filter(m => m.quarter === quarterKey)

        return state.quarterStatus[part][quarterKey]
            ? [
                  ...quarterMonths
                      .filter(m => !m.key.includes('Total')) // 过滤掉小计，先只处理月份
                      .map(m => ({
                          title: m.title, // 使用动态标题
                          dataIndex: `${part}_${m.key}`, // 生成动态 dataIndex
                          align: 'center',
                          customHeaderCell: prams => {
                              return {
                                  style: {
                                      backgroundColor: prams.dataIndex.includes('check') ? '#3858FF' : '#3875ff'
                                  }
                              }
                          },
                          width: 170
                      })),
                  {
                      title: '小计',
                      dataIndex: `${part}_${quarterKey}Total`, // 统一小计格式
                      align: 'center',
                      customHeaderCell: prams => {
                          return {
                              style: {
                                  backgroundColor: prams.dataIndex.includes('check') ? '#3858FF' : '#3875ff'
                              }
                          }
                      },
                      width: 170
                  }
              ]
            : [
                  {
                      title: '小计',
                      dataIndex: `${part}_${quarterKey}Total`,
                      align: 'center',
                      customHeaderCell: prams => {
                          return {
                              style: {
                                  backgroundColor: prams.dataIndex.includes('check') ? '#3858FF' : '#3875ff'
                              }
                          }
                      },
                      width: 170
                  }
              ]
    }

    const state = reactive({
        quarterStatus: {
            verify: { q1: false, q2: false, q3: false, q4: false },
            check: { q1: false, q2: false, q3: false, q4: false }
        },
        tableLoading: false,
        dataSource: [],
        fxdjList: [],
        batchList: [],
        filter: {
            batch: undefined,
            year: dayjs().format('YYYY'),
            riskLevel: []
        },
        verifyYearValue: 0,
        verifyQuarterValue: 0,
        verifyMonthValue1: 0,
        verifyMonthValue2: 0,
        verifyMonthValue3: 0,
        checkYearValue: 0,
        checkQuarterValue: 0,
        checkMonthValue1: 0,
        checkMonthValue2: 0,
        checkMonthValue3: 0,
        month1: 0,
        month2: 0,
        month3: 0
    })
    // 假设有一个函数可以判断当前季度（示例代码）
    function getCurrentQuarter() {
        const month = new Date().getMonth() + 1
        if (month <= 3) return 'q1'
        else if (month <= 6) return 'q2'
        else if (month <= 9) return 'q3'
        else return 'q4'
    }
    // 根据年份更新季度状态，若为当年则仅当前季度展开，否则全折叠
    function updateQuarterStatus(year) {
        const currentYear = new Date().getFullYear()
        if (year == currentYear) {
            const currentQ = getCurrentQuarter()
            // 设置当前部分为当前季度展开，其它折叠
            Object.keys(state.quarterStatus.verify).forEach(q => {
                state.quarterStatus.verify[q] = q === currentQ
                state.quarterStatus.verify[q] = q === currentQ
            })
        } else {
            // 切换往年，全部折叠
            Object.keys(state.quarterStatus.verify).forEach(q => {
                state.quarterStatus.verify[q] = false
                state.quarterStatus.verify[q] = false
            })
        }
    } // 初始化状态
    updateQuarterStatus(state.filter.year)
    function dateChange() {
        updateQuarterStatus(state.filter.year)
        getData()
    }
    // 切换季度展开状态
    const toggleQuarter = (part, quarterKey) => {
        state.quarterStatus[part][quarterKey] = !state.quarterStatus[part][quarterKey]
    }

    // 处理数据格式
    function getData() {
        state.tableLoading = true
        post('/solution-ppm/api/v2/built-in-system-ppm/project_progress/progress_predict/search', state.filter)
            .then(data => {
                if (data.code !== 200) {
                    return
                    state.dataSource = []
                }
                state.dataSource = data.data
                processData()
                console.log(state.dataSource, 'state.dataSource')
                console.log(getCurrentQuarterAllData(data.data[data.data.length - 1]))
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    let isQuarterDataCalculated = false // 只执行一次的标志变量
    const getCurrentQuarterAllData = data => {
        if (isQuarterDataCalculated) return // 如果已经计算过，直接返回
        isQuarterDataCalculated = true // 标记为已计算

        const currentMonth = dayjs().month()
        const currentQuarter = Math.floor(currentMonth / 3) + 1

        const quarterMonths = [
            ['jan', 'feb', 'mar'],
            ['apr', 'may', 'jun'],
            ['jul', 'aug', 'sep'],
            ['oct', 'nov', 'dec']
        ][currentQuarter - 1]
        state.verifyQuarterValue = data.verify[`q${currentQuarter}Total`] || 0
        state.verifyYearValue = data.verify.yearTotal || 0
        state.verifyMonthValue1 = data.verify[`${quarterMonths[0]}Value`] || 0
        state.verifyMonthValue2 = data.verify[`${quarterMonths[1]}Value`] || 0
        state.verifyMonthValue3 = data.verify[`${quarterMonths[2]}Value`] || 0
        // 验收
        state.checkQuarterValue = data.check[`q${currentQuarter}Total`] || 0
        state.checkYearValue = data.check.yearTotal || 0
        state.checkMonthValue1 = data.check[`${quarterMonths[0]}Value`] || 0
        state.checkMonthValue2 = data.check[`${quarterMonths[1]}Value`] || 0
        state.checkMonthValue3 = data.check[`${quarterMonths[2]}Value`] || 0
    }
    function resetData() {
        state.filter.batch = undefined
        state.filter.riskLevel = []
        state.filter.year = dayjs().format('YYYY')
        getData()
    }

    // 批次
    function getBatchList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/dashboard_config/batch_priority_time/里程碑进度表/批次`).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.batchList = data.data
            }
        )
    }
    // 获取风险等级
    function getFxdj() {
        get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/FXDJ').then(data => {
            state.fxdjList = data.data
        })
    }
    const processData = () => {
        state.dataSource = state.dataSource.map(project => {
            const rowData = {
                areaName: project.areaName
            }

            // 处理预计验证数据
            months.forEach(month => {
                const value = project.check[month.key] // 获取数值
                const factories = project.check[month.factory] // 获取工厂名称
                rowData[`check_${month.key}`] = factories ? `${value}\n${factories.replaceAll(';', '\n')}` : value
                const yearValue = project.check.yearTotal
                const yearFactory = project.check.yearFactories
                rowData[`check_yearTotal`] = yearFactory
                    ? `${yearValue}\n${yearFactory.replaceAll(';', '\n')}`
                    : yearValue
            })
            // 处理验收完成数据，并拼接工厂信息
            months.forEach(month => {
                const value = project.verify[month.key] // 获取数值
                const factories = project.verify[month.factory] // 获取工厂名称
                console.log(factories, '验证的工厂', month, 'month')
                rowData[`verify_${month.key}`] = factories ? `${value}\n${factories.replaceAll(';', '\n')}` : value
                console.log(rowData[`verify_${month.key}`], 'rowData[`verify_${month.key}`]', 'month', month)
                const yearValue = project.verify.yearTotal
                const yearFactory = project.verify.yearFactories
                rowData[`verify_yearTotal`] = yearFactory
                    ? `${yearValue}\n${yearFactory.replaceAll(';', '\n')}`
                    : yearValue
            })
            return rowData
        })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /* 验证验收预测 */
    .completed {
        color: #52c41a;
        font-weight: 500;
    }
    .in-progress {
        color: #1890ff;
        font-weight: 500;
    }
    .planned {
        color: #fa8c16;
        font-weight: 500;
    }
    .not-started {
        color: #bfbfbf;
    }

    /* 表格样式调整 */

    /* 分组表头样式 */
    .content :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .content :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 3px 16px;
        word-break: break-all;
    }
    .body {
        height: 100%;
    }
    .top-search {
        background-color: #fff;
        padding: 24px;
    }
    .top-search :deep(.ant3-row) {
        height: 32px;
    }
    .top-search :deep(.ant3-col) {
        height: 32px;
    }
    .content {
        padding: 16px 24px;
        height: 100%;
        background-color: #fff;
    }
    .border-div {
        padding-bottom: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .tip {
        height: 70px;
        padding: 9px 16px;
        background: #ebf1ff;
        border: 1px solid #3875ff;
        border-radius: 4px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
        margin-bottom: 16px;
    }
    .title-color-font {
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 500;
    }
    .border-div {
        padding-bottom: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .weight-font {
        font-size: 14px;
        color: #262626;
        line-height: 20px;
        font-weight: 600;
    }
    .normal-font,
    .normal-font-margin {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 400;
        display: inline-block;
    }
    .normal-font-margin {
        margin-right: 16px;
    }
    .content :deep(.table-striped-even) td {
        background-color: #f8fafc;
    }

    /* 验证验收预测 */
</style>
